<template>
  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
    <!--  <div></div>-->
    <div class="leftTop">
      杭电Online
    </div>
    <div class="topLayout">
      <router-link to="/interview" class="nav-item">
        学院介绍
      </router-link>
      <router-link to="/major" class="nav-item">
        专业介绍
      </router-link>
      <router-link to="/interview" class="nav-item">
        比赛介绍
      </router-link>
      <router-link to="/interview" class="nav-item">
        课程介绍
      </router-link>
      <router-link to="/interview" class="nav-item">
        学长有话说
      </router-link>
      <router-link to="/interview" class="nav-item">
        生活论坛
      </router-link>
      <router-link to="/interview" class="nav-item">
        编程学习
      </router-link>
      <router-link to="/interview" class="nav-item">
        网站相关
      </router-link>
    </div>

    <div style="width: 100px; padding-top: 20px;font-size: 40px; font-weight: bold;">

      <el-dropdown>
      <span class="el-dropdown-link">
        <el-icon color="#409EFC" class="no-inherit" style="margin-right: 5px;height: 10px">
        <UserFilled/>
        </el-icon>
        {{ showUsername }}

      </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="personalData">个人信息</el-dropdown-item>
            <el-dropdown-item @click="exit">退出系统</el-dropdown-item>

          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>


<script>
import Cookies from "js-cookie";
import {UserFilled} from '@element-plus/icons-vue'; // 引入 Edit 这个 svg组件


export default {
  name: "Header",
  components: {
    UserFilled,
  },
  data() {
    return {
      user: {}
    }
  },
  computed: {
    showUsername() {
      // let username = this.user.username
      // console.log(username)
      return Cookies.get('name')

    }
  },
  created() {
    let userStr = sessionStorage.getItem("user")
    this.user = JSON.parse(userStr)
  },
  methods: {
    exit() {
      this.$router.push("/")
    },
    personalData() {
      this.$router.push("/person")
    }
  }
}

</script>


<style scoped>
.leftTop {
  background-image: url('../assets/img/HDULOGO.png'); /* 替换为你的图片路径 */
  background-repeat: no-repeat;
  background-position: left center; /* 调整图片在链接旁边的位置 */
  background-size: 25px auto;
  padding-left: 10px; /* 根据图片宽度调整右边距 */
  margin-left: 10px;
  width: 120px;
  font-weight: bold;
  color: dodgerblue
}

.topLayout {
  margin-left: 20px;
  margin-right: 100px;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

.nav-item {


  color: #0c1504;
  text-decoration: none; /* 移除默认的下划线 */
  position: relative;
  display: inline-block;
  padding-bottom: 5px; /* 设置下划线的高度，根据需要调整 */
}

.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* 下划线的高度，根据需要调整 */
  background-color: #000; /* 下划线的颜色，根据需要调整 */
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
}

.nav-item:hover::after {
  transform: scaleX(1);
}

</style>